<template>
  <novel-detail-component :novel="novel"></novel-detail-component>
</template>

<script>
import { getNovelDetail} from "@/api/novelReading";
import NovelDetailComponent from "@/components/NovelDetailComponent.vue";

export default {
  components: {NovelDetailComponent},
  data() {
    return {
      novel: {
        title: "",
        author: "",
        description: "",
        coverImage:
          "",
        isEnd: true,
        kindName: "",
        totalChapter: 100,
        chapterList: [
        ],
      },
      comments: [
      ],
    };
  },
  methods: {
    // 获取小说详情
    async getNovelReadingDetail() {
      const res = await getNovelDetail(this.$route.params.id);
      if (res.data.success) {
        this.novel = res.data.result;
      }
    },
  },
  created() {
    this.getNovelReadingDetail();
  },
};
</script>

<style>
.book-detail-view {
  background-color: #f6f6f6;
  width: 100%;
  display: grid;
  justify-content: center;
}
.book-detail-view-top {
  display: flex;
  justify-content: center;
  width: 1240px;
  margin: 0 auto;
  padding: 30px 20px 45px;
  height: 300px;
  background-color: #ffffff;
}
.book-detail-cover {
  max-width: 150px;
  max-height: 200px;
  border-radius: 10px;
  margin-right: 20px;
}
.book-detail-img {
  position: relative;
  top: 40px;
  left: -350px;
}
.book-detail-info {
  position: relative;
  top: 40px;
  left: -340px;
  flex-direction: column;
  justify-content: center;
}
.book-detail-title {
  font-size: 30px;
  font-weight: bold;
}
.book-detail-kind {
  margin: 5px 0;
}
.book-detail-author {
  margin: 5px 0;
}
.mb-4 {
  margin: 50px 0;
}
.read-book {
  background-image: linear-gradient(117deg, #ff9000 12%, #ff4f00 87%);
}
.add-book {
  background-color: #f6f6f6;
}
.book-detail-isEnd {
  position: relative;
  top: 30px;
  font-size: large;
}
.book-detail-content {
  width: 1000px;
  background-color: #ffffff;
  margin: 10% 0;
  display: grid;
  margin: 50px auto;
}
.book-detail-content-description {
  margin: 0 20px;
}
.book-detail-content-description-title {
  font-size: large;
  margin: 20px 10px;
}
.book-detail-content-chapter {
  margin: 0 20px;
}
.book-detail-content-chapter-title {
  font-size: large;
  margin: 20px 10px;
}
</style>